<template>
	<div id="container">
		<div id="head">
			中深软通1609花名册
		</div>
		<hr color="#FFF" />
		<table id="table" border="0" cellspacing="7px" cellpadding="8px" align="center">
			<tr>
				<td>陈光进</td>
				<td style="color: red;
				background-color: purple;">郑智强</td>
				<td>王子昂</td>
				<td>石睿鑫</td>
				<td style="color:red">陈杨森</td>
			</tr>
			<tr>
				<td>陈叶</td>
				<td style="color:red">关琛</td>
				<td>杨红星</td>
				<td>梅涛</td>
				<td style="color:red">曹耿珲</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td style="color:red">所志松</td>
				<td>杨越</td>
				<td>王超</td>
				<td style="color:red">曾瑶</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td style="color:red"></td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		<div id="co">
			<input ref="random" class="button" type="button" value="手气不错" v-on:click="randomStus()" title="提示" />
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				students: [],
				del_students: [],
				progressIndex: 0,
				progressStep: 10,
				rs: null,
				progress: document.getElementById("random")
			}
		},
		mounted() {
			var all = document.getElementById("table").getElementsByTagName("td");
			var index = 0;
			console.log(index)
			for (var i = 0; i < all.length; i++) {
				var _students = all[i];
				if (_students && /^[\u4e00-\u9fa5]+$/.test(_students.innerText)) {
					this.students.push(_students.innerText);
					_students.id = "s" + _students.innerText.trim();
					index++;
				}
			}
		},
		methods: {
			showOnly(index) {
				if (index) {
					var ok = document.getElementById("s" + index);
					this.addClass(ok, "last_hint");
				}
			},

			show(index, clsName) {
				if (index) {
					var ok = document.getElementById("s" + index);
					this.addClass(ok, clsName ? clsName : "hint");
				}
			},
			hideOnly(index) {
				var ok = document.getElementById("s" + index);
				this.removeClass(ok, "last_hint");
			},
			hide(index) {
				var ok = document.getElementById("s" + index);
				this.removeClass(ok, "hint");
			},
			randomStus() {
				this.assignProgress(0);
				console.clear();
				this.$refs['random'].value = "命中...";
				setTimeout(this.randomIntervalBuffer, 20);
				setTimeout(this.clearIntervalBuffer, 2000);
				setTimeout(this.random, 2500);
			},
			increaseProgress() {
				if (this.progressIndex < 90) {
					this.progressIndex += this.progressStep;
					this.assignProgress(this.progressIndex);
				}
			},
			resetProgress() {
				this.progressIndex = 0;
			},
			assignProgress(index) {
				console.info('assignProgress', index);
				this.$refs['random'].style.backgroundSize = index + "% 100%";
			},
			randomIntervalBuffer() {
				this.rs = setInterval(this.randomBuffer, 100);
			},
			clearIntervalBuffer() {
				clearInterval(this.rs);
				this.$refs["random"].value = "马上就来";
				this.assignProgress(95);
			},
			randomBuffer() {
				console.info('randomBuffer');
				this.increaseProgress();
				var index = Math.floor(Math.random() * this.students.length);
				index = this.students[index];
				this.show(index);
			},
			shuffle(o) { 
				for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
				return o;
			},
			random() {
				var index = Math.floor(Math.random() * this.students.length);
				for (let i = 0; i < this.students.length; i++) {
					if (this.students[i] != this.students[index]) {
						this.hide(this.students[i]);
					}
				}
				for (let i = 0; i < this.del_students.length; i++) {
					this.hideOnly(this.del_students[i]);
				}
				this.show(this.students[index], "hinted");
				this.showOnly(this.students[index]);
				this.assignProgress(100);
				this.resetProgress();
				document.getElementById("random").value = "手气不错 【" + this.students[index] + "】 > " + (this.students
					.length - 1);
				this.del_students.push(this.students[index]);
				this.students.splice(index, 1);
				this.shuffle(this.students);
			},
			hasClass(obj, cls) {
				return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
			},
			addClass(obj, cls) {
				if (!this.hasClass(obj, cls)) obj.className += " " + cls;
			},
			removeClass(obj, cls) {
				if (this.hasClass(obj, cls)) {
					var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
					obj.className = obj.className.replace(reg, ' ');
				}
			}
		}
	}
</script>


<style>
	body {
		background-color: #FFFCF4;
		font: "微软雅黑";
	}

	#container {
		width: 100%;
		margin: 10px auto;
	}

	#head {
		text-align: center;
		font-family: "微软雅黑";
		font-size: 40px;
	}

	#table {
		font-size: 1.4em;
		align-content: center;
	}

	#table td {
		border-bottom: #001199 dashed 2px;
		/*background: #FFFFFF no-repeat url(image/m_1270370270671.jpg);*/
		/*background-position: -69px -60px;*/
		-webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	#table td.empty {
		border-bottom: none;
		background: none;
		-webkit-box-shadow: none;
	}

	.leader {
		/*background-position: -120px -440px !important;*/
		color: #FFF;
		background-color: #F00;
	}

	.hint,
	.hinted {
		color: #FFFCF4;
		background-color: #81B626;
		-webkit-animation: lastHint 0.5s;
		/* Safari 和 Chrome */
	}

	.hinted {
		opacity: 0.4;
	}

	#table td.last_hint {
		opacity: 1;
		color: #FFFCF4;
		background-color: #81B626;
		border-radius: 20px;
		-webkit-animation: lastHint 2s;
		/* Safari 和 Chrome */
		box-shadow: 7px 13px 25px -1px rgba(0, 0, 0, 0.55);
	}

	#result,
	#co {
		margin: 20px;
		color: #FFF;
	}

	#result {
		font-size: 80px;
	}

	#hint {
		color: #F00;
	}

	.button {
		/*background-color: #252;*/
		color: #FFF;
		height: 2em;
		border: dotted #FF0000 1px;
		width: 100%;
		font-size: 1.3em;
		/*background: url(image/progress1.png) no-repeat #449932;*/
		background-size: 0% 100%;
	}

	.button:hover {
		background-color: #FFF !important;
		color: #F00 !important;
		border: dotted #FF0000 1px;
		width: 100%;
	}

	@-webkit-keyframes lastHint

	/* Safari 和 Chrome */
		{
		from {
			background: #F00;
			-webkit-transform: rotateY(0deg);
		}

		to {
			background: #FF0;
			color: #EEE;
			-webkit-transform: rotateY(360deg);
		}
	}
</style>
